<template>
  <div>
    <h1>axios请求示例</h1>
    <div>
      <div>
        <button type="button" @click="requestGetRolesPageHandler">角色分页列表</button>
        <button type="button" @click="postRolesHandler">新增角色</button>
        <button type="button" @click="putRolesByRoleID">put修改数据</button>
        <button type="button" @click="deleteRolesByids">delete:删除角色</button>
        <button type="button" @click="patchRolesStatusByRoleID">patch:更新角色状态</button>
      </div>

      <hr />

      <div>
        <ul>
          <li v-for="item in roles" :key="item.id">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  editRole,
  delRole,
  editRoleStaus,
  addRole,
  type RolesType,
  requestGetRolesPage
} from './service/study1/demo3'

// 角色分页列表
const roles = ref<RolesType[]>([])
const requestGetRolesPageHandler = async () => {
  const res = await requestGetRolesPage({ pageNum: 1, pageSize: 20 })
  console.log(res.data.list)
  roles.value = res.data.list
}

// 新增列表
const postRolesHandler = async () => {
  const newRole = {
    id: 34322,
    name: '43',
    code: '66655',
    sort: 25,
    status: 15,
    dataScope: 1
  }
  const res = await addRole(newRole)
  console.log(res.data)
}

// 修改角色
const putRolesByRoleID = () => {
  editRole(2000, {
    code: '3453',
    name: '立在',
    sort: 1,
    status: 1
  })
}
// 删除角色
const deleteRolesByids = () => {
  delRole(1)
}
// 更新角色状态
const patchRolesStatusByRoleID = () => {
  editRoleStaus('2000', 0)
}
</script>

<style></style>
